var bannerBox = document.getElementById('banner-box');
var goTop = document.getElementById('goTop');
var allShop = document.getElementById('allshop');
var bannerContainer = document.getElementById('banner-container');
var lis = bannerBox.getElementsByTagName('li');//集合
var spans = bannerBox.getElementsByTagName('span');//集合
var prevBtn = bannerBox.getElementsByClassName('prev')[0];
var nextBtn = bannerBox.getElementsByClassName('next')[0];
var point = bannerBox.getElementsByClassName('point')[0];
var btns = bannerContainer.getElementsByTagName('li');
var smlist = bannerContainer.getElementsByClassName('smlist');
var now = 0;//当前在可视区图片的下标
var timer = null;

// //测试选项卡数量与标题是否数量一致
// console.log(btns.length,smlist.length)

// 轮播图JS
    //1.把所有图片挪到右侧候场区。除了第一张
    var iw = lis[0].offsetWidth;
    for(var i = 0; i < lis.length; i++) {
        lis[i].style.left = iw + 'px';
    }
    lis[0].style.left = 0;
    
    //2.焦点跟随。
    function spanMove() {
        //清除所有高亮
        for(var i = 0; i < spans.length; i++) {
            spans[i].className = '';
        }
        spans[now].className = 'active';
    }

    //3.图片可以自动轮播。
    //下一页
    function next() {
        //旧图离场：往左边走
        startMove(lis[now], {'left' : -iw});
        //新图候场
        // now++;
        now = ++now > lis.length - 1 ? 0 : now;//临界点
        lis[now].style.left = iw + 'px';
        //新图进场
        startMove(lis[now], {'left' : 0});
        spanMove();//焦点跟随
    }

    //上一页
    function prev() {
        //旧图离场：往右边走
        startMove(lis[now], {'left' : iw});
        //新图候场
        // now++;
        now = --now < 0 ? lis.length - 1 : now;//临界点
        lis[now].style.left = -iw + 'px';
        //新图进场
        startMove(lis[now], {'left' : 0});
        spanMove();//焦点跟随
    }

    timer = setInterval(next, 3000);//每隔三秒切换一个图片

    //4.左右按钮点击可以切换图片。
    //鼠标移入可视区就停止轮播
    bannerBox.onmouseenter= function() {
        clearInterval(timer);
        // console.log(111);
        //鼠标移入显示左右按钮
        // prevBtn.style.display = nextBtn.style.display = 'block';
    }

    bannerBox.onmouseleave = function() {
        timer = setInterval(next, 3000);
        // console.log(222);
        //鼠标移出隐藏左右按钮
        // prevBtn.style.display = nextBtn.style.display = 'none';
    }

    //上一页
    prevBtn.onclick = function() {
        prev();
    }
    //下一页
    nextBtn.onclick = function() {
        next();
    }

//回到顶部JS
    var speed = 180;
    var speedTimer = setInterval(function() {
        speed -= 5;//速度慢慢变小
        if(speed <= 0) {//防止速度变成0不再运动
            speed = 180;
        }
    }, 500);

    //2.点击回到顶部，可以快速回到顶部
    goTop.onclick = function() {
        // window.scrollTo(0,0);
        var scrollY = window.scrollY;//假设：1000
        var timer = setInterval(function() {
            scrollY -= speed;//每隔30毫秒就运动20px
            if(scrollY <= 0) {//证明回到了最顶部
                clearInterval(timer);
            }
            window.scrollTo(0,scrollY);
        }, 30);
    }    
    
    
//实现选项卡点击切换
    for(var i = 0;i < btns.length;i++) {
            btns[i].index = i;
                // console.log(this.index);
                btns[i].onmouseover = function() {
                    for(var j = 0; j < btns.length; j++) {
                        smlist[j].style.display = 'none';
                    }
                    smlist[this.index].style.display = 'block';
                }
                btns[i].onmouseout = function() {
                    smlist[this.index].style.display = ('none');
                }
            }

    
